<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>几个注意点</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
			几个注意点：
					1.关于组件名:
								一个单词组成：
											第一种写法(首字母小写)：school
											第二种写法(首字母大写)：School
								多个单词组成：
											第一种写法(kebab-case命名)：my-school
											第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
								备注：
										(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

					2.关于组件标签:
								第一种写法：<school></school>
								第二种写法：<school/>
								备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

					3.一个简写方式：
								const school = Vue.extend(options) 可简写为：const school = options
		-->
    <!-- 准备好一个容器-->
    <div id="root">
      <h1>{{msg}}</h1>
      <school></school>
      <hello></hello>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    //定义组件
    const s = Vue.extend({
      name: "atguigu", //Vue开发者工具中，组件呈现的名字
      template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
      data() {
        return {
          name: "尚硅谷",
          address: "北京",
        };
      },
    });

    //不使用Vue.extend，直接定义组件也可以
    const hello = {
      name: "atguigu", //Vue开发者工具中，组件呈现的名字
      template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
      data() {
        return {
          name: "尚硅谷",
          address: "北京",
        };
      },
    };

    new Vue({
      el: "#root",
      data: {
        msg: "欢迎学习Vue!",
      },
      //局部注册组件
      components: {
        school: s,
        hello: hello,
      },
    });
  </script>
</html>
